<template>
  <div class="login">
    <div class="nav">
      <Nav></Nav>
    </div>
    <div class="main">
      <div class="container">
        <!-- 后台登录界面 -->
        <div class="login-form">
          <!-- 左侧登录logo -->
          <div class="login-left"></div>
          <!-- /左侧登录logo -->
          <!-- 右侧登录栏 -->
          <div class="login-right">
            <div class="login-input">
              <div class="login-text"><span>后 台 登 录 界 面</span></div>
              <el-form :model="User" status-icon :rules="rules" ref="ruleForm">
                <el-form-item label="账号：" prop="username" label-width="120px">
                  <el-input style="width: 240px" v-model="User.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password" label-width="120px">
                  <el-input style="width: 240px" type="password" v-model="User.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>

              <el-form style="margin-top: 20px;">
                <el-button style="width: 280px;;margin-left: 80px" type="primary" @click="submitForm('ruleForm')">登录
                </el-button>
              </el-form>
            </div>
          </div>
          <!-- /右侧登录栏 -->
        </div>
        <!-- /后台登录界面 -->
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>

</template>

<script>
  import Nav from "../../components/Nav";
  import Footer from "../../components/Footer";

  export default {
    name: "Login",
    data() {
      return {
        User: {
          username: '', // 用户账号
          password: '', // 用户密码
        },
        rules: {
          username: [
            {required: true, message: '请输入账号名称', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        },
      }
    },
    methods: {
      /*登录*/
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if (!this.User.username) {
              alert('请输入账号');
              return false
            }
            if (!this.User.password) {
              alert('请输入密码');
              return false
            }
            let _this = this
            this.$axios.post("http://localhost:8055/user/admin", this.User).then(function (res) {
              //清空本次保存数据
              if (res.data != -1) {
                localStorage.setItem("admin", _this.User.username)
                alert("登录成功！")
                _this.User = {};
                _this.$router.push({name: 'Admin'});
              } else {
                alert("账号或密码错误！");
                _this.User = {};
              }
            }).catch(function (err) {
              localStorage.removeItem('admin')
              alert("登陆失败！");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    components: {
      Nav, Footer
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .main {
    height: 628px;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: 100%;
  }

  .login-form {
    display: flex;
    width: 820px;
    height: 450px;
    border-radius: 10px;
    box-shadow: 0.14rem 0.17rem 2.35rem 0 rgba(40, 120, 255, 1.14);
    border-radius: 10px;
  }

  .login-left {
    width: 410px;
    height: 450px;
    background-image: url(../../assets/imgs/left_bg3.png);
    background-size: 100% 100%;
  }

  .login-right {
    width: 410px;
    height: 450px;
  }

  .login-text {
    margin-top: 40px;
    margin-bottom: 80px;
    color: #027fff;
    text-align: center;
    font-size: 24px;
  }
</style>
